@PIVOTGRID_DRAG_HEADER_BORDER: 1px solid @PIVOTGRID_DRAG_HEADER_BORDER_COLOR;
@PIVOTGRID_DRAG_HEADER_FIRST_SHADOW: 0px 0px 1px @PIVOTGRID_DRAG_HEADER_FIRST_SHADOW_COLOR;
@PIVOTGRID_DRAG_HEADER_SECOND_SHADOW: 0px 1px 3px @PIVOTGRID_DRAG_HEADER_SECOND_SHADOW_COLOR;
@PIVOTGRID_BORDER_WIDTH: 1px;
@PIVOTGRID_BORDER: @PIVOTGRID_BORDER_WIDTH solid @PIVOTGRID_BORDER_COLOR;

.dx-pivotgrid-fields-container {

    .dx-position-indicator {
        background-color: gray;

        &.dx-position-indicator-vertical {
            margin-top: -4px;
            margin-left: -1px;
            height: 2px;

            &.dx-position-indicator-last {
                margin-top: -3px;
            }
        }

        &.dx-position-indicator-horizontal {
            margin-left: -3px;
            width: 2px;

            &.dx-position-indicator-last {
                margin-left: 3px;
            }
        }
    }

    .dx-area-fields {
        position: relative;
    }

    .dx-sort {
        color: @PIVOTGRID_AREA_COLOR;
    }

    .dx-sort-up {
        .dx-icon-sortup;
    }

    .dx-sort-down {
        .dx-icon-sortdown;
    }

    .dx-header-filter {
        color: @HEADER_FILTER_COLOR;
        .dx-icon-filter;
    }

    .dx-header-filter-empty{
        color: @HEADER_FILTER_COLOR_EMPTY;
    }

    .dx-area-field {
        cursor: pointer;
    }

    &.dx-drag {
        opacity: 0.8;

        .dx-area-field.dx-area-box {
                .box-shadow(@PIVOTGRID_DRAG_HEADER_FIRST_SHADOW, @PIVOTGRID_DRAG_HEADER_SECOND_SHADOW);
                border: @PIVOTGRID_DRAG_HEADER_BORDER;
            }
    }

    .dx-area-field.dx-area-box {
        background-color: @PIVOTGRID_AREA_BACKGROUND;
        margin-bottom: 4px;
        border: @PIVOTGRID_BORDER;
        padding: @PIVOTGRID_COMMON_TOP_BOTTOM_PADDING @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;
    }

    .dx-drag-source {
        opacity: 0.5;
    }

     .dx-column-indicators {
        vertical-align: bottom;
        margin-left: @PIVOTGRID_FIELD_INDICATORS_OFFSET;
    }

    .dx-area-field-content {
        vertical-align: bottom;
    }
}

.dx-pivotgrid {

    .dx-column-header,
    .dx-filter-header {
        .dx-pivotgrid-fields-area {
             overflow: hidden;
         }

        .dx-pivotgrid-toolbar {
            margin-right: 10px;
            float: right;
            display: inline-block;

            .dx-pivotgrid-field-chooser-button {
                margin-right: 4px;
            }
        }
    }

    .dx-data-header,
    .dx-column-header,
    .dx-area-description-cell.dx-pivotgrid-background {
        background-color: @PIVOTGRID_TOTALCOLOR;
    }

    .dx-column-header {
        .dx-pivotgrid-fields-area{
            margin-left: -5px;
            padding-left: 5px;
        }

        .dx-pivotgrid-fields-area-head {
            tr > td:first-child {
                padding-left: 0;
            }
        }
    }

    .dx-area-field.dx-area-box {
        margin-bottom: 0;
    }

    &.dx-row-lines {
        .dx-pivotgrid-area td {
            border-top: @PIVOTGRID_BORDER;
        }

        .dx-pivotgrid-area-data tr:first-child > td {
            border-top-width: 0px;
        }
    }

    .dx-expand-icon-container {
        margin-left: @PIVOTGRID_EXPAND_ICON_OFFSET;
        margin-right: @PIVOTGRID_EXPAND_ICON_TEXT_OFFSET;
    }

    .dx-area-row-cell,
    .dx-area-description-cell {
        border-right: @PIVOTGRID_BORDER;
    }

    .dx-area-description-cell {
        white-space: nowrap;

        .dx-pivotgrid-toolbar {
            .dx-button {
                margin: 1px;
            }

                .dx-button:not(.dx-state-hover):not(.dx-state-active) {
                    border-color: transparent;
                    background-color: transparent;
                    box-shadow: none;
                }
        }
    }

    .dx-bottom-border,
    .dx-area-description-cell,
    .dx-area-column-cell {
        border-bottom: @PIVOTGRID_BORDER;
    }

    .dx-pivotgrid-area {
        box-sizing: content-box;

        td {
            color: @PIVOTGRID_AREA_COLOR;
            padding: @PIVOTGRID_COMMON_TOP_BOTTOM_PADDING @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;
        }
    }

    .dx-pivotgrid-fields-area-head {
        td {
            position: relative;
            border: none;
            padding: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING 2px;
        }

        tr > td:first-child {
            padding-left: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;
        }

        tr > td:last-child {
            padding-right: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;
        }

        .dx-empty-area-text {
            white-space: nowrap;
            padding: 6px 0;
            border: @PIVOTGRID_BORDER_WIDTH solid transparent;
            color: @PIVOTGRID_FIELD_AREA_TEXT_COLOR;
        }
    }

    .dx-group-connector {
        position: absolute;
        width: 2px;
        top: 50%;
        height: 2px;
        margin-top: -1px;
        background-color: @PIVOTGRID_BORDER_COLOR;

        &.dx-group-connector-prev {
            left: 0;
        }

        &.dx-group-connector-next {
            right: 0;
        }
    }

    .dx-virtual-content {
        display: none;
    }

    .dx-virtual-mode {

        .dx-virtual-content {
            position: relative;
            overflow: hidden;
            display: block;

            table td {
                span {
                    visibility: hidden;
                }
                color: transparent;
                background-color: transparent !important;
            }
        }

        table {
            position: absolute;
            top: 0;
            left: 0;
        }
    }

    .dx-pivotgrid-area-data {
        position: relative;

        tbody {
            td {
                text-align: right;
                color: @PIVOTGRID_DATA_AREA_COLOR;
                white-space: nowrap;
                border-left: @PIVOTGRID_BORDER;
            }

                td:first-child {
                    border-left: 0px;
                }

            tr:first-child {
                .dx-total, .dx-grandtotal {
                    border-top-width: 0px;
                }
            }
        }
    }

    .dx-pivotgrid-vertical-headers {

        .dx-expand-border {
            border-top: @PIVOTGRID_BORDER;
        }

        .dx-last-cell {
            border-right: 0px;
        }

        td {
            //max-width: 150px;
            min-width: 50px;
            border-right: @PIVOTGRID_BORDER;
        }

        tr:first-child td {
            border-top: 0px;
        }

        .dx-pivotgrid-fields-area-head{
            td:last-child{
                border-right: 0px;
            }
        }

    }

    .dx-pivotgrid-vertical-headers, .dx-pivotgrid-area-data {
        .dx-row-total {
            border-top: @PIVOTGRID_BORDER;
            border-bottom: @PIVOTGRID_BORDER;
        }
    }

    .dx-area-tree-view {

        .dx-total{
            border-bottom: none;
        }

        td.dx-white-space-column{
            border-top: @PIVOTGRID_BORDER_WIDTH solid transparent;
            background-color: @PIVOTGRID_TOTALCOLOR;
            width: 24px;
            padding:0;
            min-width: 24px;
        }
    }

    .dx-pivotgrid-horizontal-headers {
        &.dx-vertical-scroll {
            border-right: @PIVOTGRID_BORDER;
        }

        td {
            text-align: center;

            &.dx-pivotgrid-expanded, &.dx-pivotgrid-collapsed {
                text-align: left;
            }
            //B234718
            border: @PIVOTGRID_BORDER;
        }

            td:first-child {
                border-left: 0px;
            }

        tr:first-child td {
            border-top: 0px;
        }
    }

    .dx-pivotgrid-horizontal-headers:last-child {
        border-bottom: 0;
    }

    .dx-total,
    .dx-data-header,    
    .dx-column-header,
    .dx-area-description-cell 
    {
        background-color: @PIVOTGRID_TOTALCOLOR;
    }

    .dx-grandtotal {
        background-color: @PIVOTGRID_GRANDTOTALCOLOR;
    }

    .dx-pivotgrid-border {

        .dx-data-header,
        .dx-filter-header,
        .dx-area-description-cell,
        .dx-area-row-cell {
            border-left: @PIVOTGRID_BORDER;
        }

        .dx-filter-header,
        .dx-area-column-cell,
        .dx-column-header,
        .dx-filter-header,
        .dx-area-data-cell {
            border-right: @PIVOTGRID_BORDER;
        }

        .dx-filter-header {
            border-top: @PIVOTGRID_BORDER;
        }

        .dx-area-data-cell,
        .dx-area-row-cell {
            border-bottom: @PIVOTGRID_BORDER;
        }
    }

    .dx-icon-sorted{
        display: inline-block;
        margin-left: 5px;
    }

    .dx-menu-item .dx-icon {
        .dx-icon-sizing(16px);
    }

    .dx-popup-content {
        padding: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;

        .dx-pivotgrid-fields-area-head {
            td {
                 padding: 0px 2px;
             }
        }
    }
}

.dx-pivotgridfieldchooser {

    .dx-area-fields {
        overflow: hidden;
    }


    .dx-treeview .dx-treeview-item .dx-icon {
        margin-bottom: 1px;
        .dx-icon-sizing(16px);
    }

    .dx-area-icon {
        display: inline-block;
        vertical-align: middle;
        width: 16px;
        height: 16px;
    }

    .dx-area {
        padding: 5px;
    }

    .dx-area .dx-area-fields {
        margin-top: 3px;
        border: @PIVOTGRID_BORDER;
    }

    .dx-area-fields[group] {
        padding: 5px;
        background-color: @PIVOTGRID_TOTALCOLOR;
    }

    .dx-area-fields.dx-drag-target {
        border-color: @PIVOTGRID_ACCENT_COLOR;
    }

    .dx-area-icon-all {
        background: @PIVOTGRID_AREA_ALL_IMAGE no-repeat center center;
    }

    .dx-area-icon-filter {
        background: @PIVOTGRID_AREA_FILTER_IMAGE no-repeat center center;
    }

    .dx-area-icon-row {
        background: @PIVOTGRID_AREA_ROW_IMAGE no-repeat center center;
    }

    .dx-area-icon-column {
        background: @PIVOTGRID_AREA_COLUMN_IMAGE no-repeat center center;
    }

    .dx-area-icon-data {
        background: @PIVOTGRID_AREA_DATA_IMAGE no-repeat center center;
    }

    .dx-icon-measure {
        background: @PIVOTGRID_AREA_DATA_IMAGE no-repeat center center;
    }

    .dx-icon-dimension {
        background: @PIVOTGRID_DIMENSION_IMAGE no-repeat center center;
    }

    .dx-icon-hierarchy {
        background: @PIVOTGRID_HIERARCHY_IMAGE no-repeat center center;
    }
}


.dx-rtl{

    .dx-pivotgrid-fields-container {
        .dx-position-indicator {

            &.dx-position-indicator-horizontal {
                margin-left: -3px;
                &.dx-position-indicator-last {
                    margin-left: 1px;
                }
            }
        }

         .dx-column-indicators {
            margin-left: 0;
            margin-right: @PIVOTGRID_FIELD_INDICATORS_OFFSET;
        }
    }

    &.dx-pivotgrid {

        .dx-column-header,
        .dx-filter-header{
            .dx-pivotgrid-toolbar{
                margin-right: 0;
                margin-left: 10px;
                float: left;
                .dx-pivotgrid-field-chooser-button{
                     margin-right: 0;
                     margin-left: 4px;
                 }

            }
        }

         .dx-column-header{
            .dx-pivotgrid-fields-area{
                margin-left: 0;
                padding-left: 0;
                margin-right: -5px;
                padding-right: 5px;
            }
           .dx-pivotgrid-fields-area-head{
                tr>td:first-child{
                    padding-left: 2px;
                    padding-right: 0;
                }
            }
        }

         .dx-pivotgrid-fields-area-head{
             tr>td{
                 padding: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING 2px;
             }

             tr>td:first-child{
                 padding-right: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;
             }

             tr>td:last-child{
                 padding-left: @PIVOTGRID_COMMON_LEFT_RIGHT_PADDING;
             }
         }

          .dx-group-connector {

            &.dx-group-connector-prev {
                left: initial;
                right: 0;
            }

            &.dx-group-connector-next {
                right: initial;
                left: 0;
            }

        }

        .dx-area-row-cell,
        .dx-area-description-cell {
        border-left: @PIVOTGRID_BORDER;
        border-right: 0px;
    }

        .dx-pivotgrid-area-data {
            tbody td {
                border-left: 0px;
                border-right: @PIVOTGRID_BORDER;
            }
        }

        .dx-pivotgrid-area-data tbody td:first-child {
            border-left: @PIVOTGRID_BORDER;
            border-right: 0px;
        }

        .dx-pivotgrid-vertical-headers {
            td {
            border-right: 0px;
            border-left: @PIVOTGRID_BORDER;
        }

            .dx-last-cell {
            border-left: 0px;
            border-right: 0px;
        }
        }

        .dx-pivotgrid-horizontal-headers {
        &.dx-vertical-scroll {
            border-right: 0px;
            border-left: @PIVOTGRID_BORDER;
        }

        &.dx-pivotgrid-area {
            border-left: 0px;
        }

        td:first-child {
            border-left: @PIVOTGRID_BORDER;
            border-right: 0px;
        }
    }

           .dx-pivotgrid-horizontal-headers td {
               &.dx-pivotgrid-expanded, &.dx-pivotgrid-collapsed {
                   text-align: right;
               }
           }

    .dx-expand-icon-container {
        margin-left: @PIVOTGRID_EXPAND_ICON_TEXT_OFFSET;
        margin-right: @PIVOTGRID_EXPAND_ICON_OFFSET;
     }

    .dx-pivotgrid-collapsed .dx-expand-icon-container {
        .flip-horizontally();
    }

    .dx-icon-sorted{
        margin-left: 0;
        margin-right: 5px;
    }

    .dx-pivotgridfieldchooser-container .dx-col {
        float: right;
    }


        .dx-pivotgrid-border {
            .dx-area-description-cell,
            .dx-data-header,
            .dx-area-row-cell {
                border-right: @PIVOTGRID_BORDER;
            }

            .dx-area-column-cell,
            .dx-column-header,
            .dx-area-data-cell {
                border-left: @PIVOTGRID_BORDER;
            }

            .dx-column-header{
                border-right:none;
            }

            .dx-area-row-cell,
            .dx-data-header{
                border-left:none;
            }
        }
    }
}
